<template>
    <div class="flex-box">
            <heads   :showBack="showBack"  :showStatus="true" ></heads>

             <div  class="flex-item padding-auto" style="display: flex;flex-direction: column;height: 100%;">
            <scroller v-show="show" :lockX=true :scrollbar-y=false>
                <div >
                    <div><h2>{{title}}</h2></div>
                    <div style='padding: 5px 5px;height: 50px;display: flex;align-items: center'>
                        <span style="flex: 1;padding-left: 10px;">
                             <div style="font-size: 12px;"> {{datetime}}</div>
                        </span>
                    </div>
                    <span style="font-size: 20px;"  v-html="content">

                    </span>

                </div>
            </scroller>
        </div>
        <toast v-model="showPositionValue"  :time="1000"  width="14.6em" :type="type" is-show-mask :text="message" :position="position"></toast>
    </div>
</template>

<script>
    import heads from '../header';
    import {Scroller,Toast} from 'vux'
    export default {
        name: "info",
        components:{
            heads,
            Scroller,
            Toast
        },
        computed:{
            user_state () {
                return this.$store.getters.user_state
            }

        },
        methods:{

           geContent(){

               var _this=this;
               this.$axios.get(this.$axios.defaults.baseURL+'getMessage',{
                   params:{
                       id:_this.id
                   }
               }).then(function (res) {
                   if(res.data.state){
                       setTimeout(() => {
                           _this.title=res.data.data.title;
                           _this.datetime=res.data.data.created_at;
                           _this.content =res.data.data.message
                           _this.show=true;
                       }, 100)
                       _this.setMessageStatus();
                   }
               }).catch(function (err) {
                   console.log(err)
               })

            },
            setMessageStatus(){
                var _this=this;
                this.$axios.get(this.$axios.defaults.baseURL+'setMessageStatus',{
                    params:{
                        id:_this.id
                    }
                }).then(function (res) {

                }).catch(function (err) {
                    console.log(err)
                })
            }
        },
        data(){
          return {
              title:'内容',
              show: false,
              showBack:{
                  showBack:true
              },
              datetime:'',
              content:'',
              id:'',
              showPositionValue:false,
              message:null,
              type:'success',
              position:'middle',
              style_like_user:true,
              style_no_like_user:false,
          }
        },

        created(){

            this.id=this.$route.query.id;
            this.geContent();
        },
        activated(){

            this.id=this.$route.query.id;
            this.geContent();


        }


    }
</script>

<style lang="less" scoped>
  @import "../../assets/css/comm.less";

  @media screen and (max-device-width: 667px) {
      .padding-auto {
          padding: 0px 7px;
      }
      .link_user{
          background: #ccc;font-size:12px;
          padding: 5px;height:16px;line-height: 16px;width: 40px;text-align: center;
          color: white;border-radius: 3px;
      }
      .no_like_user{

          background: red;font-size:12px;
          padding: 5px;height:16px;line-height: 16px;width: 40px;text-align: center;
          color: white;border-radius: 3px;
      }

  }
</style>